<template>
  <el-row>
    <!-- 用于将画面挤到中间 -->
    <el-col :span="3" style="height: 10px"></el-col>
    <el-col :span="18">
      <div class="mainContent">
        <el-form :model="form" :rules="rules" ref="form" label-width="200px">
          <el-form-item label="test label" prop="chooseType">
            <el-input v-model.number="form.chooseType"></el-input>
          </el-form-item>
          <el-form-item label="outliers index" prop="outliers_index">
            <el-input v-model="form.outliers_index"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" v-if="submitFlag"
              >提交</el-button
            >
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
        <!-- 展示返回结果 -->
        <div class="show-image">
          <div class="block" v-for="(image, num) in imageList" :key="num">
            <el-row :gutter="20">
              <el-col>
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <el-button
                      style="float: right; padding: 3px 0"
                      type="text"
                      @click="downLoad(image.url)"
                      >下载结果
                    </el-button>
                  </div>
                  <div
                    v-for="(item, key, index) in image"
                    :key="index"
                    class="text item"
                  >
                    <div v-if="key != 'url'">{{ key + ":" + item }}</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import ua from "@/api/ua";
import passerby from "@/api/user";
export default {
  data() {
    // 一些验证的规则，跟着改就行
    var checkLabel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("个数不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value > this.FileShape3) {
            callback(new Error("没那么多类别"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    return {
      // 分析数据的维度
      FileShape1: 0,
      // 分析数据样本的个数
      FileShape2: 0,
      // 标签的类别个数
      FileShape3: 0,
      // 根据数据是否合理，能否进行提交
      submitFlag: false,
      // 表单的数据
      form: {
        outliers_index: "None",
        chooseType: 1,
      },
      // element表单的一些验证规则
      rules: {
        chooseType: [
          {
            required: true,
            type: "integer",
            message: "请输入一个整数",
            trigger: "blur",
          },
          { validator: checkLabel, trigger: "blur" },
        ],
        outliers_index: [
          {
            required: true,
            message: "请输入离群点",
            trigger: "blur",
          },
          {
            pattern: /^(\d*,)*\d*$|^None$/,
            message: "格式不对",
            trigger: "blur",
          },
        ],
      },
      imageList: [],
    };
  },
  mounted() {
    // 在开始分析之前进行验证数据的合理性
    this.getState();
  },
  methods: {
    // 获取数据是否合理
    getState() {
      passerby
        .isPrepared()
        .then((res) => {
          this.FileShape1 = res.data.data.FileShape1;
          this.FileShape2 = res.data.data.FileShape2;
          this.FileShape3 = res.data.data.FileShape3;
          this.submitFlag = true;
        })
        .catch(() => {
          this.$router.replace("/metabo/differential_analysis/upload_file");
        });
    },
    // 提交表单
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //如果通过验证 to do...
          var tempForm = JSON.parse(JSON.stringify(this.form));
          ua.UASingleRegression(this.form).then((response) => {
            tempForm.url =
              process.env.API_URLANDPORT + response.data.data.webPath;
            // tempForm.table = response.data.data.result_table
            this.imageList.push(tempForm);
          });
        } else {
          this.$message.error("表单出错啦");
          return false;
        }
      });
    },
    // 获取图片
    downLoad(url) {
      window.open(url);
    },
  },
};
</script>
<style>
.mainContent {
  max-width: 1000px;
}
</style>